<template>
	<div>
		<h3>customRef</h3>
		<div>
			<input type="text" v-model="aaa">
			<p>{{ aaa }}</p>
		</div>
	</div>
</template>

<script>
import { defineComponent, ref, reactive, customRef } from 'vue';
export default defineComponent({
	setup(){
		let aaa = aaa_customRef('1111', 500)
		let methds = {
		}
		return {
			aaa,
			...methds
		}
	}
});
function aaa_customRef( value, time = 200 ){
	let timeout = ''
	return customRef((track, trigger)=>{
		return {
			// 返回数据
			get(){
				track()					// track 追踪
				return value
			},
			// 设置数据
			set(newValue){
				clearTimeout(timeout)
				timeout = setTimeout(()=>{
					value = newValue
					trigger()			// 触发，更新数据
				}, time)
			}
		}
	})
}
</script>
